<template>
	<view>
		<u-navbar back-text="返回" :border-bottom="false" height="46">
		</u-navbar>
		<view class="user_warp">
			<view class="user_logo">
				<image src="../../../static/index/logo.png" mode="widthFix"></image>
				<view class="user_logo_name">
					中国匠工 欢迎您
				</view>
			</view>
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :label-position="labelPosition" label="手机号" prop="phone" label-width="150" left-icon="phone-fill"
				 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
					<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number" :custom-style="{paddingLeft:'90rpx'}"
					 height="20rpx"></u-input>
				</u-form-item>
				<view class="user_password">
					<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150" left-icon="edit-pen-fill"
					 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
						<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="number" :custom-style="{paddingLeft:'90rpx'}"
						 height="20rpx"></u-input>
						<u-button slot="right" class="user_code" shape="circle" size="mini" @click="getCode" :ripple="true">{{codeTips}}</u-button>
					</u-form-item>
				</view>
				<view class="user_password_s">
					<u-form-item :label-position="labelPosition" label="登录密码" prop="password" label-width="150" left-icon="lock-opened-fill"
					 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
						<u-input :password-icon="true" :border="border" type="password" placeholder="请输入登录密码" v-model="model.password" :custom-style="{paddingLeft:'90rpx'}"
						 height="20rpx"></u-input>
					</u-form-item>
				</view>
				<view class="user_password_s">
					<u-form-item :label-position="labelPosition" label="确认密码" prop="againPassword" label-width="150" left-icon="checkmark-circle-fill"
					 :left-icon-style="{color:'#c40200',fontSize:'50rpx',marginRight:'30rpx'}">
						<u-input :password-icon="true" :border="border" type="password" placeholder="请输入确认密码" v-model="model.againPassword" :custom-style="{paddingLeft:'90rpx'}"
						 height="20rpx"></u-input>
					</u-form-item>
				</view>
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
				<u-button @click="submit" type="error" shape="circle" class="custom-style">找回密码</u-button>
				<u-toast ref="uToast" />
			</u-form>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			// 密码验证
			    const pwdCheck = async(rule, value, callback) => {
			      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
			      if (value.length < 6) {
			        this.changeFlag = 2;
			        return callback(new Error('密码不能少于6位'));
			      } else if (value.length > 16) {
			        this.changeFlag = 2;
			        return callback(new Error('密码最长不能超过16位'));
			      } else if (!reg.test(value)) {
					this.changeFlag = 2;
					return callback(new Error('必须是数字和字母'));
				  }else {
			        this.changeFlag = 1;
			        callback()
			      }
				  
			    }
			    // 重复密码验证
			    const pwdAgainCheck = async(rule, value, callback) => {
			      if (value.length < 1) {
			        this.changeAgainFlag = 2;
			        return callback(new Error('确认密码不能为空'));
			      } else if(this.model.password != this.model.againPassword){
			        this.changeAgainFlag = 2;
			        return callback(new Error('两次输入密码不一致'));
			      }else{
			        this.changeAgainFlag = 1;
			        callback()
			      }
			    };
			return {
				changeFlag: 0,
				changeAgainFlag: 0,
				model: {
					phone: '',
					code:'',
					password: '',
					againPassword:''
				},
				border: false,
				check: false,
				agreement: false,
				labelPosition: 'top',
				errorType: ['message'],
				codeTips: '',
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					code: [{
							type: 'number',
							required: true,
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						},
						{
							max: 4,
							message: '请输入四位验证码',
							trigger: 'change',
						},
						{
							min: 4,
							message: '请输入四位验证码',
							trigger: 'change',
						}
					],
					password: [
					  { required: true, validator: pwdCheck, trigger: 'blur'}
					],
					againPassword: [
					  { required: true, validator: pwdAgainCheck, trigger: 'blur' }
				    ]
				}
			};
		},
		onLoad() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			checkboxChange(e) {
				this.model.agreement = e.value;
			},
			async getCode() {
				if (this.$u.test.mobile(this.model.phone)) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
						let params = {
							cmd: 'sSmsCode_add_proc',
							para: JSON.stringify({
								"phone": this.model.phone,
								nomsg: 1
							})
						};
						const res = await this.$u.api.getMoneyList(params)
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('输入的手机号不正确');
				}
			},
			submit() {
				let _this = this
				this.$refs.uForm.validate( async (valid) => {
					if (valid) {
						let params = {
							cmd: 'mMember_Reset',
							para: JSON.stringify({
								username: _this.model.phone,
								secode:_this.model.code,
								password: _this.$md5(_this.model.password),
								password1: _this.$md5(_this.model.againPassword),
							})
						}
						let result = await _this.$u.api.commonPost(params)
						if (result.ResponseID == 0 || result.Message == "操作成功") {
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success',
								url: '/pages/myuser/user/UserInfo'
							})
						}else{
							_this.$refs.uToast.show({
								title: result.Message,
								type: 'error'
							})
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.user_warp {
		padding: 0 60rpx;
		.user_logo {
			text-align: center;
			margin-top: 20rpx;

			image {
				width: 57rpx;
			}

			.user_logo_name {
				margin: 40rpx 0 40rpx 0;
				font-size: 34rpx;
				color: #212121;
			}
		}
		.user_password {
			margin-top: 16rpx;
			margin-bottom: 16rpx;
			position: relative;

			.user_code {
				position: absolute;
				top: 30rpx;
				right: 0;
				width: 160rpx;
				height: 58rpx;
				border: #c40200 1rpx solid;
				color: #c40200;
			}
		}
		.user_password_s{
			margin-top: 16rpx;
			margin-bottom: 26rpx;
		}

		.custom-style {
			background-color: #c40200;
			width: 500rpx;
			height: 100rpx;
			margin-bottom: 40rpx;
			font-size: 36rpx;
		}
	}

	/deep/.u-form-item__message {
		padding-left: 90rpx !important;
	}

	/deep/.u-input__right-icon {
		height: 20rpx;
	}
</style>
